{% extends 'preheat/base.html' %}

{% block title %}{{ preheat_task.name }} - 预热状态 - CDN预热平台{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h3>预热任务状态</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <h4>{{ preheat_task.name }}</h4>
                    <p class="text-muted mb-1">创建时间：{{ preheat_task.created_time|date:"Y-m-d H:i:s" }}</p>
                </div>
                <div class="col-md-4 text-right">
                    {% if preheat_task.status == 'pending' %}
                        <span class="badge badge-secondary">等待中</span>
                    {% elif preheat_task.status == 'running' %}
                        <span class="badge badge-info">运行中</span>
                    {% elif preheat_task.status == 'completed' %}
                        <span class="badge badge-success">已完成</span>
                    {% elif preheat_task.status == 'failed' %}
                        <span class="badge badge-danger">失败</span>
                    {% endif %}
                </div>
            </div>
            
            <div class="mt-4">
                <div class="row">
                    <div class="col-md-6">
                        <strong>关联CDN域名：</strong>
                        <ul class="list-unstyled pl-0 mt-2">
                            {% for domain in preheat_task.cdn_domains.all %}
                                <li>{{ domain.domain }} ({{ domain.vendor }})</li>
                            {% empty %}
                                <li class="text-muted">暂无关联CDN域名</li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <strong>执行服务器：</strong>
                        <ul class="list-unstyled pl-0 mt-2">
                            {% for server in preheat_task.servers.all %}
                                <li>{{ server.ip }}:{{ server.ssh_port }} {% if server.remark %} - {{ server.remark }}{% endif %}</li>
                            {% empty %}
                                <li class="text-muted">暂无执行服务器</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="mt-4">
                <strong>请求地址数量：</strong>
                <span>{{ preheat_task.request_urls.count }}</span>
            </div>
            
            {% if preheat_task.completed_time %}
            <div class="mt-4">
                <strong>完成时间：</strong>
                <span>{{ preheat_task.completed_time|date:"Y-m-d H:i:s" }}</span>
            </div>
            {% endif %}
            
            {% if preheat_task.description %}
            <div class="mt-4">
                <strong>任务描述：</strong>
                <p class="mt-2 pl-3 border-l-2 border-primary">{{ preheat_task.description }}</p>
            </div>
            {% endif %}
        </div>
    </div>
    
    <!-- 预热进度 -->
    <div class="card mb-4">
        <div class="card-header bg-info text-white">
            <h3>预热进度</h3>
        </div>
        <div class="card-body">
            {% if preheat_task.status == 'running' %}
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">预热中...</span>
                    </div>
                    <p class="mt-2">预热任务正在执行中，请稍候...</p>
                </div>
            {% elif preheat_task.status == 'completed' %}
                {% if preheat_task.failed_urls %}
                <div class="alert alert-warning" role="alert">
                    <strong>注意：</strong>预热过程中有部分URL失败，请查看下方失败列表。
                </div>
                {% else %}
                <div class="alert alert-success" role="alert">
                    <strong>成功！</strong>所有URL预热完成。
                </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
    
    <!-- 失败URL列表 -->
    {% if preheat_task.failed_urls %}
    <div class="card">
        <div class="card-header bg-danger text-white">
            <h3>失败URL列表</h3>
        </div>
        <div class="card-body">
            <pre class="bg-light p-3 rounded overflow-auto" style="max-height: 400px;">{{ preheat_task.failed_urls }}</pre>
        </div>
    </div>
    {% endif %}
    
    <div class="mt-4 d-flex justify-content-end">
        <a href="{% url 'preheat:home' %}" class="btn btn-secondary">返回主页</a>
    </div>
</div>

<style>
    .badge {
        font-size: 0.9rem;
        padding: 0.5em 1em;
    }
    
    .border-l-2 {
        border-left-width: 2px !important;
    }
    
    pre {
        white-space: pre-wrap;
        word-break: break-word;
    }
</style>

<script>
    // 定期检查任务状态，无论初始状态如何
    $(document).ready(function() {
        // 每5秒检查一次任务状态
        var checkInterval = setInterval(function() {
            $.ajax({
                url: "{% url 'preheat:check_preheat_status' preheat_task.id %}",
                type: "GET",
                // 确保传递CSRF令牌和会话信息
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if (data.completed) {
                        // 任务已完成，刷新页面显示结果
                        console.log("任务已完成，刷新页面");
                        clearInterval(checkInterval);
                        location.reload();
                    } else {
                        console.log("任务未完成，继续轮询");
                    }
                },
                error: function(xhr, status, error) {
                    console.error("检查任务状态失败：", error, "状态码：", xhr.status);
                    if (xhr.status === 403 || xhr.status === 401) {
                        console.error("认证失败，重定向到登录页面");
                        location.href = "{% url 'preheat:login' %}";
                        clearInterval(checkInterval);
                    } else {
                        // 其他错误继续尝试，但减少频率
                        clearInterval(checkInterval);
                        checkInterval = setInterval(arguments.callee, 10000);
                    }
                }
            });
        }, 5000);
    });
</script>
{% endblock %}